import React, { Component } from 'react'
// 7. 导入 store 
import store from './store/index'

import axios from 'axios'

import { CHANGE_BANNER_LIST, CHANGE_PRO_LIST } from './store/types'

export default class Page2 extends Component {

    componentDidMount() {
        // /banner/list
        axios.get('/banner/list').then(res => {
            console.log(res.data.data);

            store.dispatch({
                type: CHANGE_BANNER_LIST,
                payload: res.data.data
            })
        })


        fetch('/pro/list').then(res => res.json()).then(res => {
            // console.log(res.data);
            store.dispatch({
                type: CHANGE_PRO_LIST,
                payload: res.data
            })
        })
    }

    render() {

        const banner = store.getState().pro.bannerList.map(item => {
            return <img style={{ width: 100 }} src={item.img} key={item.bannerid} />
        })

        return (
            <div>
                <h1>Page2 ----- {store.getState().app.count} </h1>

                {banner}


                <ol>
                    {store.getState().pro.proList.map(item => {
                        return <li key={item.proid}>
                            {item.proname}
                        </li>
                    })}
                </ol>

            </div>
        )
    }
}
